<!-- 发放优惠券 -->
<template>
	<div class=''>
		<div style="margin-left: 30px;margin-top:60px">
			<el-row>
			  <el-col :span="3"><div class="grid-content bg-purple font">选择优惠券：</div></el-col>
			  <el-col :span="6">
					<div class="grid-content bg-purple-light">
						<el-select v-model="value" placeholder="请选择要发放的优惠券" style="width: 300px;">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</div>
				</el-col>
			  <el-col :span="4">
					<div class="grid-content bg-purple">
						<el-button type="primary">发放优惠券</el-button>
					</div>
				</el-col>
			</el-row>
			<p class="font">选择用户：</p>
			<el-row>
				<el-col :span='3'>
					<el-select v-model="isCard" placeholder="是否办卡" style="width:150px;">
					    <el-option label="未办卡" value="0"></el-option>
					    <el-option label="已办卡" value="1"></el-option>
					</el-select>
				</el-col>
				<el-col :span='3'>
					<el-select v-model="isAttention" placeholder="是否关注公众号" style="width:150px;">
					    <!-- <el-option label="是否关注公众号" value="2"></el-option> -->
					    <el-option label="未关注" value="0"></el-option>
					    <el-option label="已关注" value="1"></el-option>
					</el-select>
				</el-col>
				<el-col :span='4'>
					<el-cascader placeholder="车系车型" v-model="seriesName" :options="series"></el-cascader>
				</el-col>
				<el-col :span='4'>
					<el-select v-model="client" multiple placeholder="请选择客户标签(可多选)">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					 </el-select>
				</el-col>
				<el-col :span='4'>
					<el-select v-model="car" multiple placeholder="请选择车辆标签(可多选)">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					 </el-select>
				</el-col>
				<el-col :span='4'>
					<el-input placeholder="请输入内容" v-model="input" class="input-with-select">
					    <el-select v-model="choosed" slot="prepend" placeholder="请选择" style="width: 90px;">
					      <el-option label="姓名" value="1"></el-option>
					      <el-option label="手机号" value="2"></el-option>
					      <el-option label="车牌号" value="3"></el-option>
					    </el-select>
					</el-input>
				</el-col>
				<el-col :span="1"><el-button type="primary" @click='search'>搜索</el-button></el-col>
			</el-row>
		</div>
		<div style="margin-top: 20px;">
			<el-table ref="multipleTable" :data="tableData" style="width: 100%;" :header-cell-style="{ background: '#eef1f6' }" @selection-change="select">
				<el-table-column type="selection"  width="45"></el-table-column>
				<el-table-column prop="name" label="客户" width="120" align="center"></el-table-column>
				<el-table-column prop="type" label="手机号" align="center"></el-table-column>
				<el-table-column prop="mc" label="默认标签" width="100" align="center"></el-table-column>
				<el-table-column prop="set" label="车牌信息" align="center"></el-table-column>
				<el-table-column prop="day" label="公众号状态" width="120" align="center"></el-table-column>
				<el-table-column prop="statu" label="是否办卡" width="120" align="center"></el-table-column>
				<el-table-column prop="statu" label="消费次数" width="120" align="center"></el-table-column>
				<el-table-column prop="statu" label="消费总额/元" width="120" align="center"></el-table-column>
				<el-table-column prop="date" label="最近一次消费时间" width="180" align="center"></el-table-column>
				>
			</el-table>
		</div>
		
	</div>
</template>

<script>
	export default {
		data () {
			return {
				//输入的文字
				input:'',
				
				//选择的类别
				choosed:'',
				
				//车辆标签
				car:'',
				
				//客户标签
				client:'',
				
				// 车系车型
				seriesName:'',
				series:[{
					value:'直男',
					label:'直男',
					children:[
						{
							value: 'shejiyuanze',
							label: '设计原则',
						}
					]
				}],
				
				//是否关注公众号
				isAttention:'',
				
				//是否办卡
				isCard:'',
				
				// 选择优惠券
				value:'',
				options:[
					{value:'0',label:'请选择要发放的优惠券'},
					{value:'1',label:'测试券1'},
					{value:'2',label:'测试券2'},
				],
				
				tableData: [
					{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '1', num: '1', day: '50', set: '满200元-10' },
					{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '2', num: '1', day: '50', set: '满200元-10' },
					{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '3', num: '1', day: '50', set: '满200元-10' },
					{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '4', num: '1', day: '50', set: '满200元-10' }
				],
				
			};
		},
		methods: {
			//勾选的数据
			select(val){
				console.log(val)
			},
			
			// 搜索
			search(){
				console.log('是否办卡',this.isCard,'是否关注公众号',this.isAttention,'车系车型',this.seriesName,'客户标签',this.client,'车辆标签',this.car,'选择类别',this.choosed,'输入文字',this.input)
			},
		},

created() {
	console.log('发放优惠券')
}, //生命周期 - 创建之后
	}
</script>

<style scoped>
.font{
	font-size: 22px;
	line-height: 40px;
}
</style>